<template>
  <div>
      <!-- 评论列表 -->
      <div class="cmt-list" v-for="item in commentList" :key="item.com_id">
        <!-- 评论的 Item 项 -->
        <div class="cmt-item">
          <!-- 头部区域 -->
          <div class="cmt-header">
            <!-- 头部左侧 -->
            <div class="cmt-header-left">
              <img :src="item.aut_photo" class="avatar">
              <span class="uname">{{item.aut_name}}</span>
            </div>
            <!-- 头部右侧 -->
            <div class="cmt-header-right">
              <van-icon name="like" size="16" color="red" v-if="item.is_liking === true" @click="likecurrentComment(true,item)" />
              <van-icon name="like-o" size="16" color="gray" v-else @click="likecurrentComment(false,item)" />
            </div>
          </div>
          <!-- 主体区域 -->
          <div class="cmt-body">
            {{item.content}}
          </div>
          <!-- 尾部区域 -->
          <div class="cmt-footer" style="display: flex;">
          <div style="margin-left: 23px;">{{formatter(item.pubdate)}}</div>
          <!-- 回复按钮组件 -->
          <reply @click.native="replyFn(item)" :commentObj="item" v-if="isshow"/>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import reply from '@/components/huifu'
import { timeAgo } from '@/utils/dayformate.js'
  import {
    likeCommentApi,
    unlikeCommentApi,
  } from '@/api/index.js'
export default {
  name: 'commentItem',
  props:['commentList','isshow'],
  data() {
    return {

    }
  },
  methods: {
    // 喜欢/不喜欢当前的评论
    async likecurrentComment(likeState, obj) {
      if (likeState) {
        // 目前是喜欢点亮了红心的状态 > 取消红心状态 变为不喜欢
        obj.is_liking = false
        let {
          data: res
        } = await unlikeCommentApi({
          comment_id: obj.com_id
        })
        console.log(obj)
        console.log(res, '不喜欢')
      } else {
        // 目前是不喜欢状态点亮灰心 >  变为喜欢
        obj.is_liking = true
        let {
          data: res
        } = await likeCommentApi({
          comment_id: obj.com_id
        })
        console.log(obj)
        console.log(res, '喜欢')
      }
    },
    // 格式化时间
    formatter: timeAgo,
    // 点击回复按钮事件
    replyFn(item){
      // 把评论对象给最外层 index
      this.$bus.$emit('replyClick',item)
      this.$emit('replyShow',true)
    }
  },
  computed: {},
  components: {
    reply,
  }
}
</script>
<style lang="less" scope>
  .cmt-list {
    padding: 10px;

    .cmt-item {
      padding: 15px 0;

      +.cmt-item {
        border-top: 1px solid #f8f8f8;
      }

      .cmt-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cmt-header-left {
          display: flex;
          align-items: center;

          .avatar {
            width: 40px;
            height: 40px;
            background-color: #f8f8f8;
            border-radius: 50%;
            margin-right: 15px;
          }

          .uname {
            font-size: 12px;
          }
        }
      }

      .cmt-body {
        font-size: 14px;
        line-height: 28px;
        text-indent: 2em;
        margin-top: 6px;
        word-break: break-all;
      }

      .cmt-footer {
        font-size: 12px;
        color: gray;
        margin-top: 10px;
      }
    }
  }
</style>
